<!DOCTYPE html>
<html lang="zh">
<head>
	<!--
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 是一个 HTML 文档中的元标签，其核心作用是‌声明当前文档的类型和字符编码‌
			具体来看：
				http-equiv="Content-Type" 表示这个标签模拟的是 HTTP 协议响应头中的 Content-Type 字段
				content="text/html; charset=UTF-8" 则指明了两个关键信息：文档的媒体类型是 text/html（即 HTML 格式）
				并且文档使用的字符编码是 UTF-8
			它的重要性在于‌指导浏览器如何正确地解码和渲染页面‌。如果字符编码声明错误或缺失，浏览器可能无法正确显示页面中的文字，
			尤其是非英文字符（如中文），从而导致乱码问题。

			在 HTTP 协议中，Content-Type 是一个头部字段，用于指示传输数据的媒体类型（MIME 类型）和编码
			当服务器没有在 HTTP 响应头中明确指定 Content-Type 时，这个位于 HTML 代码 <head> 区域中的 <meta> 标签就能起到相同的作用
	-->
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>jQuery EasyUI CRUD Demo</title>
	<link rel="stylesheet" type="text/css"
	      href="../External_Libraries/jquery-easyui-1.11.3/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../External_Libraries/jquery-easyui-1.11.3/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="JQuery_EasyUI_Learning_Record1.css">
	<script type="text/javascript" src="../External_Libraries/jquery-easyui-1.11.3/jquery.min.js"></script>
	<script type="text/javascript" src="../External_Libraries/jquery-easyui-1.11.3/jquery.easyui.min.js"></script>
	<script type="text/javascript" src="JQuery_EasyUI_Learning_Record1.js"></script>
</head>
<body>
<h2>Basic CRUD Application</h2>
<div class="demo-info">
	<div class="demo-tip icon-tip"></div>
	<div>Click the buttons on datagrid toolbar to do crud actions.</div>
</div>

<!--
	html块级元素
	html内联元素

	1. 默认布局行为
		块级元素‌：独占一行，前后自动换行（如<div>、<p>、<h1>-<h6>）‌
		内联元素‌：与其他内联元素同行排列，仅占用必要宽度（如<span>、<a>、<img>）‌

	2. 尺寸控制
		块级元素‌：可直接设置width、height、margin等属性‌
		内联元素‌：默认不支持width/height，仅左右margin和padding生效

	3. 内容容纳
		‌块级元素‌：可包含其他块级或内联元素‌
		内联元素‌：通常仅能容纳文本或其他内联元素‌

	4. CSS转换特性
		通过display属性可相互转换：
		display: inline-block：结合两者特性，支持尺寸控制且同行排列‌
-->
<table id="dg" title="My Users" class="easyui-datagrid" url="get_users.json" toolbar="#toolbar" pagination="true"
       rownumbers="true" collapsible="true" method="get"
       fitColumns="true" singleSelect="true" scrollOnSelect="true" style="width:auto;height:75%">
	<thead>
	<!--
				上面直接在html标签内部直接指定style，是因为这样style就变成了html元素的内联样式(优先级很高，其它方式无法覆盖jquery-easyUI
				内部的样式,至少目前无法覆盖)
				thead表示表格的表头
				tr表示表格的一行
				th表示表格的表头单元格
	 -->
	<tr>
		<th field="firstname" width="25%">First Name</th>
		<th field="lastname" width="25%" >Last Name</th>
		<th field="phone" width="25%" >Phone</th>
		<th field="email" width="25%" >Email</th>
	</tr>
	</thead>
</table>
<div id="toolbar">
	<a href="#" class="easyui-linkbutton" iconCls="icon-add" plain="false" onclick="newUser()">New User</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-edit" plain="false" onclick="editUser()">Edit User</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-remove" plain="false" onclick="removeUser()">Remove User</a>
</div>
<div id="dlg" class="easyui-dialog" closed="true" buttons="#dlg-buttons">
	<div class="ftitle">User Information</div>
<!--
	method 方法规定如何发送表单数据（form-data）（表单数据会被发送到在 action 属性中规定的页面中）
	表单数据可被作为 URL 变量的形式来发送（method="get"）或者作为 HTTP post 事务的形式来发送（method="post"）
	关于 GET 的注释：
		将表单数据以名称/值对的形式附加到 URL 中
		URL 的长度是有限的（大约 3000 字符）
		绝不要使用 GET 来发送敏感数据！（在 URL 中是可见的）
		对于用户希望加入书签的表单提交很有用
		GET 更适用于非安全数据，比如在 Google 中查询字符串

	关于 POST 的注释：
		将表单数据附加到 HTTP 请求的 body 内（数据不显示在 URL 中）
		没有长度限制
		通过 POST 提交的表单不能加入书签
-->

	<form id="fm" method="post">
		<div class="fitem">
<!--
    <label> 标签的主要功能是建立文本标签与表单控件（如 <input>、<select>、<textarea> 等）的关联关系
    当用户点击标签文本时，浏览器会自动将焦点转到关联的表单控件上
    这显著增大了表单的可点击区域，使操作更加便捷
    同时，它为屏幕阅读器等辅助技术提供了语义化描述，极大改善了视障用户的无障碍访问体验
-->
			<label class="label">First Name:</label>
			<input name="firstname" placeholder="amx666" class="easyui-validatebox" required="true">
		</div>
		<div class="fitem">
			<label class="label">Last Name:</label>
			<input name="lastname" placeholder="amx666" class="easyui-validatebox" required="true">
		</div>
		<div class="fitem">
			<label class="label">Phone:</label>
			<input name="phone">
		</div>
		<div class="fitem">
			<label class="label">Email:</label>
			<input name="email" class="easyui-validatebox" validType="email">
		</div>
	</form>
</div>
<div id="dlg-buttons">
	<a href="#" class="easyui-linkbutton" iconCls="icon-ok" onclick="saveUser()">Save</a>
	<a href="#" class="easyui-linkbutton" iconCls="icon-cancel" onclick="$('#dlg').dialog('close',true)">Cancel</a>
</div>

<div id="href-buttons">
    <a href="Page1.html" class="easyui-linkbutton" iconCls="icon-large-smartart">跳到Page1</a>
    <a href="Page2.html" class="easyui-linkbutton" iconCls="icon-large-smartart">跳到Page1</a>
    <a href="Page3.html" class="easyui-linkbutton" iconCls="icon-large-smartart">跳到Page1</a>
</div>
</body>
</html>


<!--
	<a href="#"></a>
	基本结构：‌
	<a>：        锚点标签，用于创建超链接
		href="#"：   链接目标为当前页面顶部
		空内容：    标签内没有显示文本
		功能特点：‌
		点击后会滚动到页面顶部
		常用于临时占位链接或JavaScript交互的锚点
		不会跳转到其他页面或外部链接
		常见用途：‌
		页面内导航的占位符
		配合JavaScript实现动态功能
		作为返回顶部按钮的基础结构

		<a> 标签是构建网页导航和内容互联的基础元素，通过合理使用可以实现丰富的交互功能

	下面讲一讲  href="javascript:void(0)" 和 href="#" 的区别
		href="javascript:void(0)" 和 href="#" 都是在HTML中创建可点击链接元素的常用方式，但它们在行为和用户体验上存在重要区别。

		href="javascript:void(0)"
			工作原理‌：
				void(0) 是JavaScript运算符，返回 undefined
				点击链接时执行JavaScript代码但不进行任何操作
			‌优点‌：
				不会改变URL（不会在地址栏添加#）
				不会导致页面滚动
				语义明确，专门用于JavaScript交互
			‌缺点‌：
				禁用右键菜单中的"在新标签页中打开"选项
				对搜索引擎不友好
				依赖JavaScript执行

		href="#"
            工作原理‌：
				指向当前页面的锚点
				点击时页面会滚动到顶部（如果存在id为空的元素）
				在地址栏添加#符号
			‌优点‌：
				支持右键菜单的所有功能
				对搜索引擎相对友好
				不依赖JavaScript
			‌缺点‌：
				可能导致页面跳转到顶部
				改变URL地址
				可能干扰浏览器历史记录

		使用建议
			推荐使用场景‌：
				纯JavaScript交互：href="javascript:void(0)"
				需要支持右键菜单：href="#" + event.preventDefault()
				现代最佳实践：使用 <button> 元素替代链接
-->
